<template>
  <div>
    <button @click="status=1">显示A</button>
    <button @click="status=2">显示B</button>
    <button @click="status=3">显示C</button>
    <hr>
    <!-- 
      :include="['A', 'B']"  只缓存哪些组件
      :exclude="['A', 'B']"   不缓存哪些组件
      :max="2"  最大缓存数量
     -->
    <keep-alive :max="2">
      <A v-if="status===1"></A>
      <B v-else-if="status===2"></B>
      <C v-else></C>
    </keep-alive>
  </div>
</template>

<script>
import A from './A.vue'
import B from './B.vue'
import C from './C.vue'
export default {
  name: 'KeepAliveTest',

  data () {
    return {
      status: 1
    }
  },

  components: {
    A,
    B,
    C
  }
}
</script>

<style scoped>

</style>
